<template>
    <el-card>
        <el-tabs v-model="activeTab">
            <el-tab-pane label="商品详情" name="details" >
                <template v-slot:label>
                    <div @click="handleTabClick('details')">商品详情</div>
                </template>
                <product-details :imageUrls="imageUrls" :properties="properties" />
            </el-tab-pane>
            <el-tab-pane label="商品评价({{ reviewCount }})" name="reviews">

                <template v-slot:label>

                    <span @click="handleTabClick('reviews')">商品评价({{ reviewCount }})</span>

                </template>

                <product-reviews />

            </el-tab-pane>
        </el-tabs>
    </el-card>
</template>

<script setup>
import ProductDetails from './ProductDetails.vue';
import ProductReviews from './ProductReviews.vue';
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { getGoodDetailAPI } from '@/api/detail.js'

const imageUrls = ref([]);
const activeTab = ref('details'); // 默认显示商品详情
const properties = ref([]);
const reviewCount = ref(0);
const id = useRouter().currentRoute.value.params.id;

const fetchImageUrls = async () => {
    try {
        const response = await getGoodDetailAPI(id);
        imageUrls.value = response.data.result.details.pictures;
        properties.value = response.data.result.details.properties;
    } catch (error) {
        console.error('Error fetching image URLs:', error);
    }
};

const fetchReviewsInfo = async () => {
    try {
        const response = await axios.get(`https://mock.boxuegu.com/mock/1175/goods/4001231/evaluate`);
        reviewCount.value = response.data.result.evaluateCount;
    } catch (error) {
        console.error('Error fetching reviews:', error);
    }
};


const handleTabClick = (tabName) => {
    if (tabName === 'details') {
        fetchImageUrls();
    } else {
        fetchReviewsInfo();
    }
};

onMounted(() => {
    fetchImageUrls();
    fetchReviewsInfo();
});


</script>

<style setup lang="scss">

.el-tabs__item{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    font-size: 18px
}

.el-tabs__item.is-active {
    color: rgb(39, 186, 155);
}

.el-tabs__active-bar {
    background-color: rgb(39, 186, 155);
}

.el-tabs__item:hover {
    color: inherit;
}
</style>